<template>
  <a-modal
    :title="title"
    :visible="visible"
    @cancel="close"
    width=70%
    :maskClosable="false"
  >
    <div class="checkedOrder">
      <a-card :bordered="true" style="width: 100%;margin-top: 10px" v-if="forOrderDetail">
        <a-steps :current="current">
          <a-popover slot="progressDot" slot-scope="{ index, status, prefixCls }">
            <template slot="content">
              <span>step {{ index }} status: {{ status }}</span>
            </template>
            <span :class="`${prefixCls}-icon-dot`"/>
          </a-popover>
          <!--          @change="ChangeStep"-->
          <a-step title="订单提交" :subTitle="createdTime" disabled/>
          <a-step title="待仓库审核" disabled/>
          <a-step title="待客服审核" v-if="displayServe" disabled/>
          <a-step title="审核完成"/>
        </a-steps>
      </a-card>
      <!--      基本信息-->
      <a-card title="基本信息" :bordered="true" style="width: 100%;margin-top: 10px">
        <div class="Orderstatus">
          <div class="basic">
            <h4>订单编号</h4>
            <span class="basic_text">{{ OrderDetails.orderCode }}</span>
          </div>
          <div class="basic">
            <h4>门店名称</h4>
            <span class="basic_text">{{ OrderDetails.terminalName }}</span>
          </div>
          <div class="basic">
            <h4>所属经销商</h4>
            <span class="basic_text">{{ OrderDetails.custName }}</span>
          </div>
          <div class="basic">
            <h4>订单来源</h4>
            <span class="basic_text">{{ OrderDetails.orderType }}</span>
          </div>
          <div class="basic">
            <h4>订单状态</h4>
            <span class="basic_text">{{ OrderDetails.orderStatus }}</span>
          </div>
        </div>
        <!--        第二行-->
        <div class="Orderstatustwo">
          <div class="basic">
            <h4>订单总额</h4>
            <span class="basic_text">{{ OrderDetails.oldTotalAmount||'' }}</span>
          </div>
          <div class="basic">
            <h4>优惠金额</h4>
            <span class="basic_text">{{ OrderDetails.appointAmount }}</span>
          </div>
          <div class="basic">
            <h4>使用费用</h4>
            <span class="basic_text">{{ OrderDetails.unappointAmount }}</span>
          </div>
          <div class="basic">
            <h4>实际支付</h4>
            <span class="basic_text">{{ OrderDetails.realPayAmount }}</span>
          </div>
          <div class="basic">
            <h4>关联客服订单</h4>
            <span class="basic_text">{{ OrderDetails.relationOrderCode }}</span>
          </div>
        </div>
      </a-card>
      <!--      商品清单-->
      <a-card title="商品清单" :bordered="true" style="width: 100%;margin-top: 10px">
        <a-table :columns="columns" :scroll="{x: 'max-content'}" :data-source="dataSource" v-if="!displayServe" bordered
                 :pagination="false">
        </a-table>
        <a-table :columns="columns2" :data-source="dataSource" v-if="displayServe" bordered :pagination="false"
                 :scroll="{x: 'max-content'}">
          <template slot="action" slot-scope="text, record">
            <!--            <a-popconfirm-->
            <!--              v-if="dataSource.length"-->
            <!--              title="确认删除?"-->
            <!--              @confirm="() => ">-->
            <a href='javascript:' @click="EditNum(record)">修改</a>
            <!--            </a-popconfirm>-->
          </template>
        </a-table>
      </a-card>
    </div>
    <template slot="footer">
      <a-button key="back" @click="close">
        取消
      </a-button>
      <a-button key="foot" @click="serviver" v-if="serviverbuts" type="warn">
        转客服审核
      </a-button>
      <a-button key="submit" type="primary" @click="handleOk" v-if="forOrderDetail">
        通过
      </a-button>
      <!--      <a-button key="overs" @click="handleAdd"  type="primary">权限</a-button>-->
    </template>
    <!--    客服修改-->
    <a-modal v-model="EditNums" title="修改数量" ok-text="确认" cancel-text="取消" @ok="OktoNum" width="30%"
             style="padding: 0 15px">
      <a-input ref="userNameInput" v-model="productNames" :disabled="true" label="商品名称"
               style="height: 38px;margin: 8px 0"></a-input>
      <div class="inputs">
        <a-input ref="userNameInput" v-model="oldNum" :disabled="true" style="height: 38px"></a-input>
        <a-icon type="swap-right" style="margin: auto 8px;"/>
        <a-input type="Number" ref="userNameInput" v-model="newNum" placeholder="请输入" style="height: 38px"
                 :min="0"></a-input>
      </div>
    </a-modal>
    <!--  客服通过-->
    <a-modal v-model="sendOrder" title="操作提示" width="30%" @cancel="seenewdetail"
             style="padding: 0 15px">
      <div style="padding: 8px 7px">
        <div>原订单:<a @click="SeeDetail('old')">查看详情</a></div>
        <div v-if="showdetail">修改后订单，订单编号：<a @click="SeeDetail('new')">{{ dataSource3.orderCode }} 查看详情</a></div>
        <div v-if="!showdetail">原订单无变化</div>
      </div>
      <!--      查看详情订单的modal-->
      <!--      <a-modal :visible="FSeeDetail" title="操作提示" ok-text="确认" cancel-text="取消" @cancel="backToDetail" width="80%"-->
      <!--               style="padding: 0 15px">-->
      <!--        <a-table :data-source="dataSource4" :columns="columns4" bordered :pagination="false">-->
      <!--        </a-table>-->
      <!--        <template slot="footer">-->
      <!--          <a-button key="backs" @click="Okgives">-->
      <!--            完成-->
      <!--          </a-button>-->
      <!--        </template>-->
      <!--      </a-modal>-->
      <template slot="footer">
        <a-button key="backs" @click="OktoDetail">
          确认
        </a-button>
      </template>
    </a-modal>
  </a-modal>
</template>
<script>
import { getAction, postAction } from '@/api/manage'
import { PageListMixin } from '@/mixins/PageListMixin'

export default {
  name: 'checkOrders',
  mixins: [PageListMixin],
  data() {
    return {
      title: '',
      serviverbuts: true,
      forOrderDetail: true,
      showdetail: false,
      dataSource4: [],
      FSeeDetail: false,
      // 查看详情
      dataSource2: [],
      dataSource3: [],
      sendOrder: false,
      procode: {},
      productNames: '',
      oldNum: 0,
      newNum: 0,
      EditNums: false,
      displayServe: false,
      dataSource: [],
      createdTime: '',
      current: 1,
      OrderDetails: {},
      visible: false,
      url: {
        OrderList: window._CONFIG['domianOrderURL'] + '/cnOrderController/audiValetOrder',
        OrderDetail:window._CONFIG['domianDmsURL'] + '/order/getCnOrderByIdOrOrderCode'
      },
      columns: [
        {
          status: '',
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '类型',
          align: 'center',
          dataIndex: 'itemType',
          customRender: function(text) {
            if (text === '1') {
              return '本品'
            } else if (text === '2') {
              return '搭赠'
            } else if (text === '3') {
              return '赠品'
            } else {
              return '折扣行'
            }
          }
        },
        {
          title: '商品编号',
          align: 'center',
          dataIndex: 'productCode'
        },
        {
          title: '商品名称',
          align: 'center',
          dataIndex: 'productName'
        },
        {
          title: '单位',
          align: 'center',
          dataIndex: 'saleUnit'
        },
        {
          title: '标准订货价',
          align: 'center',
          dataIndex: 'oldPrice'
        },
        {
          title: '促销活动',
          align: 'center',
          dataIndex: 'actName'
        },
        {
          title: '数量',
          align: 'center',
          dataIndex: 'itemNum'
        },
        {
          title: '折扣率',
          align: 'center',
          dataIndex: 'discountRate'
        },
        {
          title: '折扣价',
          align: 'center',
          dataIndex: 'price'
        },
        {
          title: '折扣金额',
          align: 'center',
          dataIndex: 'disPrice'
        },
        {
          title: '小计金额/元',
          align: 'center',
          dataIndex: 'itemAmount'
        },
        {
          title: '费用',
          align: 'center',
          dataIndex: 'unappointAmount'
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remarks'
        }
        // {
        //   title: '合计',
        //   align: 'center',
        //   dataIndex: 'Num'
        // }

      ],
      columns2: [
        {
          status: '',
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '类型',
          align: 'center',
          dataIndex: 'itemType',
          customRender: function(text) {
            if (text === '1') {
              return '正常品'
            } else if (text === '2') {
              return '买赠'
            } else if (text === '3') {
              return '纯赠品'
            } else {
              return '折扣行'
            }
          }
        },
        {
          title: '商品编号',
          align: 'center',
          dataIndex: 'productCode'
        },
        {
          title: '商品名称',
          align: 'center',
          dataIndex: 'productName'
        },
        {
          title: '单位',
          align: 'center',
          dataIndex: 'saleUnit'
        },
        {
          title: '标准订货价',
          align: 'center',
          dataIndex: 'price'
        },
        {
          title: '促销活动',
          align: 'center',
          dataIndex: 'actName'
        },
        {
          title: '数量',
          align: 'center',
          dataIndex: 'itemNum'
        }, {
          title: '折扣率',
          align: 'center',
          dataIndex: 'discountRate'
        },
        {
          title: '折扣价',
          align: 'center',
          dataIndex: 'disPrice'
        },
        {
          title: '折扣金额',
          align: 'center',
          dataIndex: 'favourableAmount'
        },
        {
          title: '小计金额/元',
          align: 'center',
          dataIndex: 'itemAmount'
        },
        {
          title: '费用',
          align: 'center',
          dataIndex: 'unappointAmount'
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remarks'
        },
        {
          title: '操作',
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }

      ]
    }
  },
  watch: {
    OrderDetails: function(val, oldval) {
      if (val.orderType == '1') {
        val.orderType = '消费者'
      } else if (val.orderType == '2') {
        val.orderType = '门店'
      } else {
        val.orderType = '经销商'
      }
    }
  },
  methods: {
    edit(code, value) {
      console.log(code, value)
      this.status = ''
      // 处理客服与仓库两种不同情况 进入客服区域
      let codes = ''
      if (value === 'serviver') {
        // 列表展示，初始赋值，
        this.displayServe = true
        this.current = 2
        this.status = 'serviver'
        this.serviverbuts = false
        this.forOrderDetail = true
        codes = code[0]
      } else if (value === 'forOrderDetail') {
        codes = code
        // 客服审核列表
        this.displayServe = false
        // 详情
        this.forOrderDetail = false
        // 待客审核按钮
        this.serviverbuts = false
      } else {
        this.displayServe = false
        this.forOrderDetail = true
        this.serviverbuts = true
        this.current = 1
        this.status = ''
        codes = code[0]
      }
      getAction(this.url.OrderDetail, { orderCode: codes }).then(res => {
        if (res.code !== 200) {
          this.$message.error('请求数据失败')
          return
        }
        let Array = res.result
        // Array.items.forEach(item => {
        //   if (item.itemAmount == 0){
        //     item.discountAmount = 0
        //   } else {
        //     item.discountAmount = (item.itemAmount - item.unappointAmount - item.discountAmount) / item.itemAmount
        //   }
        // })
        this.OrderDetails = Array
        console.log(Array)
        this.dataSource = this.OrderDetails.items
        this.createdTime = this.OrderDetails.createDate + '-' + this.OrderDetails.createDateTime
        this.visible = true
        // 处理折扣率
        console.log(res)
      })

    },
    // 步骤条审核时间
    ChangeStep(current) {
      this.OverCheck(60)
    },
    // 完成审核功能
    OverCheck(status) {
      // 验证之前求和运算
      if (this.current == 1 || this.current == 2) {
        this.current++
        let params = {
          'orderStatus': status,
          'id': this.OrderDetails.id,
          'orderCode': this.OrderDetails.orderCode,
          'items': this.dataSource
        }
        postAction(this.url.OrderList, params).then(res => {
          if (res.code == 200) {
            if (this.status === 'serviver') {
              this.afterPass(res)
              return
            }
            this.$emit('ok')
            this.close()
          } else {
            this.current--
            this.$message.error(res.message)
          }
        })
      } else {
        this.current--
        this.$message.warning('请检查订单状态')
        this.close()
      }
    },

    EditNum(key) {
      console.log(key)
      this.procode = key
      this.productNames = key.productName
      this.oldNum = key.itemNum
      this.newNum = key.itemNum
      this.EditNums = true
    },
    OktoNum() {
      this.dataSource.map(item => {
        if (item == this.procode) {
          item.itemNum = this.newNum
        }
      })
      console.log(this.newNum)
      this.EditNums = false
    },
    afterPass(result) {
      let oldOrder = result.result.orderCode
      // 拆分前
      getAction(this.url.OrderDetail, { orderCode: oldOrder }).then(res => {
        this.dataSource2 = [res.result]
        console.log(this.dataSource2)
      })
      // 拆分后
      if (this.oldNum !== this.newNum) {
        let newOrder = result.result.relationOrderCode
        getAction(this.url.OrderDetail, { orderCode: newOrder }).then(res => {
          this.dataSource3 = [res.result]
        })
        this.showdetail = true
      } else {
        this.showdetail = false
      }
      this.sendOrder = true
    },

    OktoDetail() {
      this.$emit('ok')
      this.sendOrder = false
      this.close()
    },
    SeeDetail(value) {
      if (value == 'new') {
        // 新详情
        console.log(this.dataSource3)
        // this.dataSource4 = this.dataSource3
        this.OrderDetails = this.dataSource3[0]
        this.dataSource = this.OrderDetails.items
        this.createdTime = this.OrderDetails.createDate + '-' + this.OrderDetails.createDateTime
        // 显示限制
        this.sendOrder = false
        this.forOrderDetail = false
        this.serviverbuts = false
        this.$emit('serviverok')
      } else {
        console.log(this.dataSource2)
        // this.dataSource4 = this.dataSource2
        this.OrderDetails = this.dataSource2[0]
        this.dataSource = this.OrderDetails.items
        this.createdTime = this.OrderDetails.createDate + '-' + this.OrderDetails.createDateTime
        this.sendOrder = false
        this.forOrderDetail = false
        this.serviverbuts = false
        this.$emit('serviverok')
      }
      // this.FSeeDetail = true
    },
    // Okgives() {
    //   this.$emit('ok')
    //   this.sendOrder = false
    //   this.FSeeDetail = false
    //   this.close()
    //
    // },
    seenewdetail() {
      this.$emit('ok')
      this.close()
    },
    backToDetail() {
      this.FSeeDetail = false
    },
    handleAdd() {
      this.$refs.sysDepartModal.add()
      this.$refs.sysDepartModal.title = '新增'
    },
    // 提交审核结果 客服通过
    handleOk() {
//       if (this.status == 'serviver'){
//         let a = 0
//         this.dataSource.forEach(item => {
//           a = item.itemNum
//         })
//         if(a == 0 ){
// this.$message.error('')
//         }
//       }
      this.OverCheck(60)
    },
    serviver() {
      this.OverCheck(50)
    },
    close() {
      this.visible = false
      this.current = 1
    }
  },
  computed: {
    orderType() {
      if (this.OrderDetails.orderType == 1) {
        return '会员下单'
      } else if (this.OrderDetails.orderType == 2) {
        return '代客下单'
      } else {
        return '客服下单'
      }
    }
  }
}
</script>

<style scoped>
.Orderstatus {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.basic {
  width: 20%;
}

.basic_text {
  font-size: 14px;
  font-weight: 700;
  text-align: center;

}

.Orderstatustwo {
  display: flex;
  margin-top: 30px;

}

.inputs {
  display: flex;
  justify-content: space-between;
}
</style>